{% extends "base.html" %} {% load static %}
{% block title %} 登录 {% endblock title %}
{% block content %}
<div class="container">
    <div class="row justify-content-center">
        <div class="col-md-8 col-lg-6">
            <!-- 消息提示 -->
            {% if messages %}
            <div class="messages mt-4">
                {% for message in messages %}
                <div class="alert alert-{{ message.tags }} alert-dismissible fade show" role="alert">
                    {{ message }}
                    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                </div>
                {% endfor %}
            </div>
            {% endif %}

            <div class="card shadow-sm mt-4">
                <div class="card-body p-4">
                    <h2 class="text-center mb-4">欢迎回来</h2>
                    
                    <form method="post" action="." class="login needs-validation" novalidate>
                        {% csrf_token %}
                        <!-- 账号 -->
                        <div class="form-group mb-3">
                            <label for="username" class="form-label">账号</label>
                            <div class="input-group">
                                <span class="input-group-text">
                                    <i class="fas fa-user"></i>
                                </span>
                                <input type="text" 
                                       class="form-control" 
                                       id="username" 
                                       name="username" 
                                       placeholder="请输入账号"
                                       required>
                            </div>
                            <div class="invalid-feedback">请输入账号</div>
                        </div>
                        
                        <!-- 密码 -->
                        <div class="form-group mb-4">
                            <label for="password" class="form-label">密码</label>
                            <div class="input-group">
                                <span class="input-group-text">
                                    <i class="fas fa-lock"></i>
                                </span>
                                <input type="password" 
                                       class="form-control" 
                                       id="password" 
                                       name="password"
                                       placeholder="请输入密码"
                                       required>
                            </div>
                            <div class="invalid-feedback">请输入密码</div>
                        </div>

                        <!-- 提交按钮 -->
                        <button type="submit" class="btn btn-primary w-100 mb-3">
                            登录
                        </button>
                    </form>

                    <div class="text-center">
                        <p class="mb-2">
                            还没有账号？
                            <a href='{% url "userprofile:register" %}' class="text-primary">注册账号</a>
                        </p>
                        <p class="mb-0">
                            忘记密码？
                            <a href='{% url "password_reset" %}' class="text-primary">重置密码</a>
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
/* 表单样式 */
.form-control {
    border-radius: 8px;
    padding: 10px 15px;
}

.input-group-text {
    background-color: transparent;
    border-right: none;
}

.form-control:focus {
    border-color: #80bdff;
    box-shadow: 0 0 0 0.2rem rgba(0,123,255,.25);
}

/* 按钮样式 */
.btn-primary {
    padding: 10px;
    border-radius: 8px;
    font-weight: 500;
}

/* 链接样式 */
a {
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

/* 消息提示样式 */
.alert {
    border-radius: 8px;
    border: none;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.alert-success {
    background-color: #d4edda;
    color: #155724;
}

.alert-error,
.alert-danger {
    background-color: #f8d7da;
    color: #721c24;
}

.btn-close {
    font-size: 0.8rem;
}

/* 原有样式... */
</style>

<script>
// 表单验证
(function () {
    'use strict'
    var forms = document.querySelectorAll('.needs-validation')
    Array.prototype.slice.call(forms).forEach(function (form) {
        form.addEventListener('submit', function (event) {
            if (!form.checkValidity()) {
                event.preventDefault()
                event.stopPropagation()
            }
            form.classList.add('was-validated')
        }, false)
    })
})()
</script>
{% endblock content %}